<template>
  <div>
    <van-nav-bar
      title="支付订单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="box1">
      <img :src="img" alt="" />
    </div>
    <div class="box2">￥{{ allFee / 100 }}</div>
    <div class="box3">
      <span>收款方:</span>
      <span>{{ company }}</span>
    </div>
    <div class="box4">
      <span>支付剩余时间:</span>
      <van-count-down :time="time" />
    </div>
  </div>
</template>

<script>
import $axios from "@/api/request";
export default {
  data() {
    return {
      img: this.$route.query.img,
      OrderId: this.$route.query.OrderId,
      allFee: this.$route.query.allFee,
      company: this.$route.query.company,
      createTime: this.$route.query.createTime,
      timer: null,
    };
  },
  computed: {
    time() {
      let createTime = this.createTime;
      let nowTime = Date.now();
      let time = 15 * 60 * 1000 - (nowTime - createTime);
      return time;
    },
  },
  created() {
    this.payList();
  },
  destroyed() {
    clearInterval(this.timer);
  
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    payList() {
      this.timer = setInterval(() => {
        $axios
          .get(
            "http://zl.huruqing.cn:3003/order/detail?orderId=" + this.OrderId
          )
          .then((res) => {
            if (res.result.orderStatus === "01") {
              this.$router.push("/home");
              clearInterval(timer);
            }
          });
      }, 2000);
    },
  },
};
</script>

<style>
.box1 {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box2 {
  height: 50px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #eae8e8;
}
.box3,
.box4 {
  display: flex;
  justify-content: space-between;
  align-content: center;
  font-size: 15px;
  height: 49px;
  margin: 0 15px;
  align-items: center;
}
</style>